import HoverMask from "@/pages/lowCodeEditorPlus/components/EditArea/HoverMask";
import { useMaterialDrop } from "@/pages/lowCodeEditorPlus/hooks/useMaterialDrop";
import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { Modal as AntdModal } from "antd";
import { ContainerEmpty } from "@/pages/lowCodeEditorPlus/materialItems/common-components/ContainerEmpty";
import { accept } from "./setter";
import { useEffect } from "react";

function Modal({ id, children, title, styles, footer, width }: CommonComponentProps) {
  const { canDrop, drop } = useMaterialDrop(accept.body, id);
  const { canDrop: footerCanDrop, drop: footerDrop } = useMaterialDrop( accept.footer, id, "footer" );

  useEffect(() => {
    const modalContentElements = document.querySelector('.modalInDevModeContainer .ant-modal-content');
    if(modalContentElements){
      modalContentElements.setAttribute('data-component-id', id);
      modalContentElements.setAttribute('data-component-bind-unit', "body");
    }
  }, []);
  return (
    <div className="modalInDevModeContainer h-full">
      <AntdModal
        title={title}
        style={styles}
        open={true}
        destroyOnClose
        getContainer={false}
        maskClosable={false}
        footer={null}
        width={width}
      >
        <div ref={drop} style={styles} data-component-id={id} data-component-unit-type="body"
          className={`min-h-5 -mx-6 py-4 px-5`}>
          {Array.isArray(children) && children.length > 0 ? children : <ContainerEmpty desc="请添加内容"/>}
        </div>
        <div ref={footerDrop} data-component-id={id} data-component-unit-type="footer" className="ant-modal-footer h-8">
          {Array.isArray(footer) && footer.length > 0 ? footer : <ContainerEmpty desc="请添加按钮" noMinHeight/>}
        </div>

        {id && canDrop && (
          <HoverMask portalWrapperClassName="portal-wrapper" containerClassName="edit-area" componentId={id} />
        )}
        {id && footerCanDrop && (
          <HoverMask
            portalWrapperClassName="portal-wrapper"
            containerClassName="edit-area"
            componentId={id}
            componentUnitType="footer"
          />
        )}
      </AntdModal>
    </div>
  );
}

export default Modal;
